<template>
  <view class="detail-container">
    <!-- 状态卡片 -->
    <view class="status-card" :class="record.status">
      <view class="status-info">
        <text class="status-text">{{ record.statusText }}</text>
        <text class="desc">{{ getStatusDesc(record.status) }}</text>
      </view>
      <image :src="getStatusImage(record.status)" mode="aspectFit" class="status-image" />
    </view>
    
    <!-- 医院信息 -->
    <view class="info-card">
      <view class="hospital-info" @tap="navigateToHospital">
        <image :src="record.hospitalLogo" mode="aspectFit" class="logo" />
        <view class="info">
          <text class="name">{{ record.hospitalName }}</text>
          <text class="address">{{ record.hospitalAddress }}</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      
      <view class="divider"></view>
      
      <view class="department-info">
        <image :src="record.departmentIcon" mode="aspectFit" class="icon" />
        <view class="info">
          <text class="name">{{ record.departmentName }}</text>
          <text class="doctor">{{ record.doctorName }} {{ record.doctorTitle }}</text>
        </view>
      </view>
    </view>
    
    <!-- 就诊信息 -->
    <view class="detail-card">
      <view class="section-title">就诊信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">就诊时间</text>
          <text class="value">{{ record.date }} {{ record.time }}</text>
        </view>
        <view class="info-item">
          <text class="label">就诊人</text>
          <text class="value">{{ record.patientName }}</text>
        </view>
        <view class="info-item">
          <text class="label">就诊卡号</text>
          <text class="value">{{ record.cardNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">挂号费用</text>
          <text class="value price">¥{{ record.fee }}</text>
        </view>
      </view>
    </view>
    
    <!-- 诊断信息 -->
    <view class="detail-card" v-if="record.diagnosis">
      <view class="section-title">诊断信息</view>
      <view class="diagnosis-info">
        <view class="diagnosis-item">
          <text class="label">主诉</text>
          <text class="value">{{ record.diagnosis.complaint }}</text>
        </view>
        <view class="diagnosis-item">
          <text class="label">诊断结果</text>
          <text class="value">{{ record.diagnosis.result }}</text>
        </view>
        <view class="diagnosis-item">
          <text class="label">医嘱</text>
          <text class="value">{{ record.diagnosis.advice }}</text>
        </view>
      </view>
    </view>
    
    <!-- 检查项目 -->
    <view class="detail-card" v-if="record.examinations?.length">
      <view class="section-title">检查项目</view>
      <view class="examination-list">
        <view 
          class="examination-item"
          v-for="(exam, index) in record.examinations"
          :key="index"
          @tap="viewReport(exam)"
        >
          <view class="exam-info">
            <text class="name">{{ exam.name }}</text>
            <text class="time">{{ exam.time }}</text>
          </view>
          <text class="status" :class="exam.status">{{ exam.statusText }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 处方药品 -->
    <view class="detail-card" v-if="record.prescriptions?.length">
      <view class="section-title">处方药品</view>
      <view class="prescription-list">
        <view 
          class="prescription-item"
          v-for="(medicine, index) in record.prescriptions"
          :key="index"
        >
          <view class="medicine-info">
            <text class="name">{{ medicine.name }}</text>
            <text class="spec">{{ medicine.specification }}</text>
          </view>
          <view class="usage">
            <text class="dosage">{{ medicine.dosage }}</text>
            <text class="frequency">{{ medicine.frequency }}</text>
          </view>
          <text class="quantity">x{{ medicine.quantity }}</text>
        </view>
      </view>
      <view class="total-amount">
        <text>处方总额</text>
        <text class="amount">¥{{ record.prescriptionAmount }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <block v-if="record.status === 'upcoming'">
        <button class="action-btn" @tap="reschedule">改约</button>
        <button class="action-btn primary" @tap="cancelAppointment">取消预约</button>
      </block>
      <block v-if="record.status === 'completed'">
        <button class="action-btn" @tap="viewAllReports">查看全部报告</button>
        <button class="action-btn primary" @tap="bookAgain">再次预约</button>
      </block>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 就诊记录详情
const record = ref({
  id: 1,
  hospitalName: '澳门镜湖医院',
  hospitalLogo: '/static/hospital/kiang-wu.jpg',
  hospitalAddress: '澳门连胜马路33号',
  departmentName: '心内科',
  departmentIcon: '/static/department/cardiology.png',
  doctorName: '张医生',
  doctorTitle: '主任医师',
  date: '2024-03-25',
  time: '09:30',
  fee: 60,
  status: 'completed',
  statusText: '已完成',
  patientName: '张三',
  cardNo: '1234567890',
  diagnosis: {
    complaint: '胸闷、气短2天',
    result: '冠心病、高血压2级',
    advice: '建议定期复查，控制饮食，规律服药'
  },
  examinations: [
    {
      id: 1,
      name: '心电图检查',
      time: '2024-03-25 10:00',
      status: 'completed',
      statusText: '已完成',
      hasReport: true
    },
    {
      id: 2,
      name: '血常规检查',
      time: '2024-03-25 10:30',
      status: 'processing',
      statusText: '检验中'
    }
  ],
  prescriptions: [
    {
      name: '硝酸甘油片',
      specification: '0.5mg*50片/盒',
      dosage: '遵医嘱',
      frequency: '需要时含服',
      quantity: 1
    },
    {
      name: '阿司匹林肠溶片',
      specification: '100mg*30片/盒',
      dosage: '1片',
      frequency: '每日1次',
      quantity: 2
    }
  ],
  prescriptionAmount: 156.5
})

// 获取状态描述
const getStatusDesc = (status) => {
  const desc = {
    upcoming: '请按时就诊，提前半小时到医院',
    completed: '就诊已完成，请遵医嘱用药',
    cancelled: '预约已取消，如需就诊请重新预约'
  }
  return desc[status]
}

// 获取状态图片
const getStatusImage = (status) => {
  const images = {
    upcoming: '/static/status/upcoming.png',
    completed: '/static/status/completed.png',
    cancelled: '/static/status/cancelled.png'
  }
  return images[status]
}

// 查看报告
const viewReport = (exam) => {
  if (exam.hasReport) {
    uni.navigateTo({
      url: `/pages/records/report?id=${exam.id}`
    })
  }
}

// 改约
const reschedule = () => {
  uni.navigateTo({
    url: `/pages/appointment/schedule?recordId=${record.value.id}`
  })
}

// 取消预约
const cancelAppointment = () => {
  uni.showModal({
    title: '取消预约',
    content: '确定要取消该预约吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用取消预约接口
        console.log('取消预约:', record.value.id)
      }
    }
  })
}

// 查看全部报告
const viewAllReports = () => {
  uni.navigateTo({
    url: `/pages/records/reports?recordId=${record.value.id}`
  })
}

// 再次预约
const bookAgain = () => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?departmentId=${record.value.departmentId}&hospitalId=${record.value.hospitalId}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const recordId = page.$page?.options?.id
  
  // 加载就诊记录详情
  loadRecordDetail(recordId)
})

const loadRecordDetail = (id) => {
  // 加载就诊记录详情的逻辑
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .status-card {
    background: $primary-gradient;
    padding: 40rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    &.upcoming {
      background: linear-gradient(135deg, #67AFAB, #89C4C1);
    }
    
    &.completed {
      background: linear-gradient(135deg, #4DCEA5, #2FB4AE);
    }
    
    &.cancelled {
      background: linear-gradient(135deg, #909399, #C0C4CC);
    }
    
    .status-info {
      .status-text {
        font-size: 40rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .desc {
        font-size: 26rpx;
        color: rgba(255,255,255,0.9);
      }
    }
    
    .status-image {
      width: 120rpx;
      height: 120rpx;
    }
  }
  
  .info-card {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .hospital-info {
      display: flex;
      align-items: center;
      position: relative;
      padding-bottom: 20rpx;
      
      .logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: $radius-md;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .address {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
      
      .icon-arrow-right {
        font-size: 24rpx;
        color: $text-secondary;
      }
    }
    
    .divider {
      height: 1rpx;
      background: #eee;
      margin: 20rpx 0;
    }
    
    .department-info {
      display: flex;
      align-items: center;
      
      .icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      
      .info {
        .name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .doctor {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
    }
  }
  
  .detail-card {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        width: 6rpx;
        height: 30rpx;
        background: $primary-color;
        border-radius: 3rpx;
        margin-right: 16rpx;
      }
    }
    
    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $text-primary;
          
          &.price {
            color: $danger;
            font-weight: bold;
          }
        }
      }
    }
    
    .diagnosis-info {
      .diagnosis-item {
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .value {
          font-size: 28rpx;
          color: $text-primary;
          line-height: 1.6;
        }
      }
    }
    
    .examination-list {
      .examination-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .exam-info {
          flex: 1;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .time {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .status {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 16rpx;
          
          &.completed {
            color: $success;
            background: rgba($success, 0.1);
          }
          
          &.processing {
            color: $primary-color;
            background: $primary-light;
          }
        }
        
        .icon-arrow-right {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
    }
    
    .prescription-list {
      .prescription-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .medicine-info {
          flex: 1;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .spec {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .usage {
          margin-right: 30rpx;
          text-align: right;
          
          .dosage {
            font-size: 26rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .frequency {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .quantity {
          font-size: 28rpx;
          color: $text-primary;
          font-weight: bold;
        }
      }
    }
    
    .total-amount {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #eee;
      
      text {
        font-size: 26rpx;
        color: $text-regular;
        margin-right: 16rpx;
        
        &.amount {
          font-size: 32rpx;
          color: $danger;
          font-weight: bold;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: $text-regular;
      background: $bg-color;
      border-radius: $radius-xl;
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 